chore: implement storybook by jakehwll · Pull Request #932 · coder/vscode-coder

jakehwll · 2026-05-04T15:03:49Z

This PR was modified by Coder Agents on behalf of Jake Howell.

Adds Storybook support for developing and previewing webview components in isolation outside of VS Code. Includes stories for all tasks package components with a dark/light theme switcher that mirrors VS Code CSS custom properties.

Add .storybook/ config with Vite integration, workspace alias resolution, codicon injection, and acquireVsCodeApi mock
Add dark-v2 and light-v2 themes (sourced from vscode-elements/webview-playground) with a toolbar switcher in globalTypes
Add 17 component stories under packages/tasks/src/components/ covering all major UI states
Add test/webview/decorators.tsx with a shared withQueryClient decorator for stories using React Query
Add storybook and build-storybook scripts to root package.json
Add Storybook dependencies to workspace catalog

EhabY · 2026-05-05T10:39:09Z

+// Sourced from `vscode-elements/webview-playground`.
+// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/dark-v2.js


To avoid manual refreshes, add a scripts/sync-vscode-themes.mjs that fetches both files from the pinned upstream sha (already in the header comments) and rewrites them in place

I'm not sure if this would work but can we have the script filter vars referenced in our source plus those used by @vscode-elements/elements, which would cut these files by ~85% (though it's only a big change on this branch only)

If it points to the same SHA why do we want to pull it again? Am I missing something? 🙂

I think the script filter might be a future improvement

I meant to say that we can trigger this script and it would pull a new SHA (most recent) and add that comment in the header so we know what upstream SHA we are currently pinned against

EhabY · 2026-05-05T10:58:08Z

Love the change and the story books ❤️

Pls do run the linters and make sure the pipeline passes!

Replace the tag-based dynamic CSS import in .storybook/preview.ts with a withTasksStyles decorator exported from packages/tasks/src/decorators.ts. Each tasks story opts in via its decorators array, keeping preview.ts package-agnostic. Future packages can follow the same pattern.

pnpm workspace:* protocol and package.json exports fields handle @repo/* resolution natively — the hand-rolled getWorkspaceAliases function was redundant.

- Add react, @tanstack/react-query, and @storybook/react to storybook-utils package.json so it declares its own contracts. - Rename setState param from T to state in preview.ts mock. - Fix import ordering across story and test files (lint autofix).

- Add tsconfig.json for @repo/mocks and @repo/storybook-utils so eslint's project service can find them. - Fix import ordering in mocks/tasks.ts and inbox.test.ts. - Extract QueryClientDecorator component to satisfy rules-of-hooks. - Sort devDependencies in tasks/package.json.

jakehwll · 2026-05-06T04:52:27Z

/coder-agents-review

coder-agents-review

All 23 DEREM findings are now resolved (21 fixed, 1 accepted with documentation, 1 contested then fixed after panel decision). The author addressed every item, including the contested DEREM-14 which was fixed in ee1d2a6 after the panel's 5/5 rejection of the original defense.

The PR has been substantially refactored based on @EhabY's architectural feedback (new @repo/storybook-utils package, restructured imports, per-package CSS decorators, removed getDefaultFontStack). Those changes are under active human review.

CI is still failing on Lint. Please ensure pnpm lint passes before merging.

No new findings from this round.

🤖 This review was automatically generated with Coder Agents.

These blocks were accidentally added to package.json but belong exclusively in pnpm-workspace.yaml. The duplicate workspaces field used an object format that eslint-plugin-package-json rejected as invalid (expects an array per npm spec).

Reverts e346f15. The --vscode-font-family CSS variable is only referenced in global.css, not defined by the theme data. Without the inline font stack the Storybook preview renders with browser defaults.

CollapsibleToggle and TaskSelection play functions relied on web component attribute reflection and IPC side-effects that don't work reliably in Chromatic's headless environment. The stories remain as visual-only variants covering collapsed and expanded states.

EhabY · 2026-05-06T10:19:48Z

Now that we have storybooks, there seems to be some inconsistencies:

tasks-actionmenu--opened, the loading item is not aligned with the others:

tasks-errorbanner--default, should we align the view logs to the right?

tasks-statepanel--error, the retry here is not a button while it is a button in the error state. Was this intentional or a storybook styling issue 🤔?

The status indicators are not applying the right styles it seems, like this is just a pure square:

tasks-tasklist--default could mix and match other states and descriptions IMO for better coverage

This is the "Task Selection" test but I do not see it selecting a task (or inside a selected task):

EhabY · 2026-05-06T09:21:27Z

-		"@storybook/test": "catalog:",
+		"@storybook/addon-a11y": "^8.6.18",
+		"@storybook/addon-essentials": "^8.6.18",
+		"@storybook/react": "^8.6.18",


This one could be moved back to the catalog now that we import it in an inner package actually

EhabY · 2026-05-06T09:23:10Z

+// Sourced from `vscode-elements/webview-playground`.
+// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/dark-v2.js


I meant to say that we can trigger this script and it would pull a new SHA (most recent) and add that comment in the header so we know what upstream SHA we are currently pinned against

EhabY · 2026-05-06T09:39:36Z

+ * Injects the tasks package CSS into the Storybook preview.
+ * Add to `decorators` in any story that renders tasks components.
+ */
+export const withTasksStyles: Decorator = (Story) => Story();


The entire reason the file exists is to trigger import "../index.css" as a side effect when stories import the symbol. I would rather that we do not mix production utils in with test utils.

Replace with import.meta.glob in .storybook/preview.ts:

// packages/tasks/storybook.preview.ts import "./src/index.css";

// .storybook/preview.ts import.meta.glob("../packages/*/storybook.preview.ts", { eager: true });

Each package opts in with a one-line file outside src/. Stories stop importing the decorator entirely. Add /// <reference types="vite/client" /> at the top of preview.ts for the ImportMeta.glob typing, and add ../packages/*/storybook.preview.ts to the storybook tsconfig include so ESLint can resolve it.

EhabY · 2026-05-06T09:40:49Z

+		"rootDir": ".."
+	},
+	"include": ["*.ts", "themes/**/*.ts"],
+	"exclude": ["node_modules"]


Not needed actually, TS already ignores this folder

Actually I think this all can be like this now:

{ "extends": "../packages/tsconfig.packages.json", "include": ["*.ts", "themes/**/*.ts"] }

Verified: tsc --noEmit -p .storybook passes and pnpm storybook:build builds clean.

EhabY · 2026-05-06T09:46:01Z

+				{
+					id: "root",
+					style: {
+						fontFamily: getDefaultFontStack(),


There is an issue with how this is used actually, style={{ fontFamily }} on #root is overridden by descendants like packages/tasks/src/index.css:8 that read var(--vscode-font-family) directly.

Set it as a CSS variable instead (extend the theme arrays or call setProperty next to the theme loop), then drop the inline style.

EhabY · 2026-05-06T10:07:53Z

 		"prettier": "^3.8.3",
 		"react": "catalog:",
 		"react-dom": "catalog:",
+		"storybook": "^8.6.18",


Why not use the most recent version for all of these new packages?

EhabY · 2026-05-06T10:21:28Z

+		tasks: [
+			task({ id: "task-1" }),
+			task({ id: "task-2" }),
+			task({ id: "task-3" }),
+		],


This is reused 3 times here. Lift to a module-scope const or push into meta.args, then per-story args only overrides what differs.

EhabY · 2026-05-06T10:22:03Z

+		isThinking: false,
+		taskLogs: {
+			status: "ok",
+			logs: [
+				logEntry({
+					id: 1,
+					type: "input",
+					content: "What is the weather today?",
+				}),
+				logEntry({
+					id: 2,
+					type: "output",
+					content: "The weather today is sunny with a high of 25°C.",


This is reused 2 times here. Lift to a module-scope const or push into meta.args, then per-story args only overrides what differs.

EhabY · 2026-05-06T10:23:15Z

+export const Opened: Story = {
+	play: async ({ canvasElement }) => {
+		const icon = canvasElement.querySelector("vscode-icon[action-icon]");
+		await expect(icon).toBeTruthy();


Not needed IMO

EhabY · 2026-05-06T10:24:19Z

+export const Default: Story = {
+	args: {},
+};


args: {} is dead weight. Use Default: Story = {}; like in NoTemplateState.stories.tsx

jakehwll added 30 commits May 4, 2026 13:35

feat: implement storybook config

df33940

feat: implement basic stories + theme

d47927c

fix: use fontFamily over font-family

77adc50

fix: resolve codicons

5a1abb8

feat: add Opened variant of <ActionMenu /> story

dc8dc2e

feat: add queryclient helper

1d1fc50

fix: resolve rendering

e1d726c

fix: resolve max-width size

0798669

feat: missing args in <PromptInput />

34dd889

fix: resolve background color

23ae3a2

fix: resolve theme and imports

ea85877

fix: prepend void

b2779b9

fix: resolve story type

7d3b120

fix: add future expansion

7ac9626

fix: document getDefaultFontStack

90768d4

fix: remove unnecessary themes

a0324cb

fix: resolve acquireVsCodeApi

ada1dcb

chore: reusable entities

162bc3a

Merge branch 'main' into jakehwll/implement-storybook

5587a8d

fix: resolve rendering of TasksPanel

9dd27f4

feat: move testHelpers to mock

76a6f3e

fix: move to existing mock helpers

12d7c2b

feat: implement theme switcher

eed89ac

fix: debroaden tsconfig.json

fba820c

fix: improve imports

9def7ca

fix: remove unnecessary satisfies

08d95ac

fix: prefer use of fn()

8861bb5

fix: use fn() not () => fn()

468b87c

fix: move to using fn() (again)

d28e7ae

fix: use import type

5261c61

EhabY assigned jakehwll May 5, 2026

EhabY reviewed May 5, 2026

View reviewed changes

jakehwll added 16 commits May 6, 2026 11:56

fix: backport storybook:build

144ea5e

fix: inline storybook dependencies

7b5e825

fix: remove storybook artifacts from .vscodeignore

cfedf94

fix: storybook .gitignore

0d5d139

fix: remove getDefaultFontStack()

e346f15

fix: resolve storybook to tsconfig.packages.json

90c39bc

fix: remove unnecessary values from preview.ts

9350f36

fix: minify WebviewApi

6ac98ab

fix: add @repo/storybook-utils

3411417

feat: implement @repo/mocks

d534058

refactor: move withTasksStyles to utils/storybook.ts

563c07c

refactor: use useState initializer for QueryClient in withQueryClient

0983d78

refactor: remove manual workspace alias resolution from Storybook

1e6e091

pnpm workspace:* protocol and package.json exports fields handle @repo/* resolution natively — the hand-rolled getWorkspaceAliases function was redundant.

coder-agents-review Bot reviewed May 6, 2026

View reviewed changes

jakehwll added 7 commits May 6, 2026 05:18

fix: restore original coder dependency SHA in pnpm-lock.yaml

6b3aa21

fix: .prettierignore and eslint.config.mjs ignore

93243c2

chore: prettier format

eef9896

revert: restore getDefaultFontStack in preview.ts

c0321a6

Reverts e346f15. The --vscode-font-family CSS variable is only referenced in global.css, not defined by the theme data. Without the inline font stack the Storybook preview renders with browser defaults.

fix: reoslve TasksPanel.stories.tsx CollapsibleToggle

f05a685

EhabY reviewed May 6, 2026

View reviewed changes

		// Sourced from `vscode-elements/webview-playground`.
		// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/dark-v2.js

Conversation

jakehwll commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

EhabY commented May 5, 2026

Uh oh!

jakehwll commented May 6, 2026

Uh oh!

coder-agents-review Bot left a comment

Choose a reason for hiding this comment

Uh oh!

EhabY commented May 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jakehwll commented May 4, 2026 •

edited

Loading